<template>
  <uni-nav-bar title="预约详情" :fixed="true" statusBar></uni-nav-bar>
  <swiperList></swiperList>
  <view class="package column">
    <view style="font-size: 36rpx;color: #1B91FF;transform: skewX(-15deg);">您当前有一个正在进行中的订单</view>
    <view style="margin:6rpx 0px;font-size: 26rpx;" v-if="getInfo">{{getInfo.msg}}</view>
    <view>服务人员正在配送 <text style="font-size: 22rpx;color:#666;" @click="telCall('400-109-1606')">客服电话：400-109-1606</text>
    </view>
  </view>
  <view class="package" v-if="getInfo">
    <view class="space-between">
      <view>车牌号</view>
      <view>{{getInfo.cart_code}}</view>
    </view>
    <view class="space-between top">
      <view>手机号</view>
      <view>{{getInfo.driver_mobile}}</view>
    </view>
    <!--   <view class="space-between top">
      <view>时间</view>
      <view>{{getInfo.deliverytime}}</view>
    </view> -->
    <view class="space-between top">
      <view>位置</view>
      <view style="width:70%;align-items:flex-start;justify-content: flex-end;" class="center"
        @click="navTo('reservation/addressList?name='+getInfo.address)">
        {{getInfo.address}}
        <uni-icons type="compose" size="23"></uni-icons>
      </view>
    </view>
  </view>
  <view class="package" v-if="getInfo">
    <view class="space-between" v-if="getInfo.staff_name"
      @click="getInfo.staff_mobile?telCall(getInfo.staff_mobile):''">
      <view>配送员</view>
      <view>{{getInfo.staff_name}}
        {{getInfo.staff_mobile}}
      </view>
    </view>
    <view class="space-between" v-if="getInfo.staff_name">
      <view>送达时间</view>
      <view>{{getInfo.endtime}}</view>
    </view>
    <view class="space-between top">
      <view>预计时间</view>
      <view>{{getInfo.delivery_type==1?'立即送达':getInfo.deliverytime}}</view>
    </view>
  </view>
  <view class="package">
    <view class="space-between">
      <view>顺便带上福利品</view>
      <view style="color:#1B91FF;" @click="redirectTo('index/gemstone')">车友福利站>></view>
    </view>
    <view class="top" style="font-size:22rpx;">选择您喜欢的福利品，工作人员会根据您的选择配送</view>
    <view class="space-between top" v-if="getInfo">
      <view class="center">当前蓝宝石:
        <text style="font-size: 36rpx;color:#1B91FF;margin-left:10rpx;">{{userInfo.gem}}+{{getInfo.score}}</text>
      </view>
      <view class="right">数量:x{{count_nums}}</view>
      <view class="right">合计蓝宝石:{{count_score}}</view>
    </view>
    <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
      :style="{ height: pageHeight + 'px' }">
      <view class="space-between" v-for="item in orderLists" :key="item.id" style="margin-top:25rpx">
        <image :src="item.image" mode=""
          style="width: 130rpx;height: 130rpx;border-radius: 10rpx;border-radius: 10rpx;"></image>
        <view style="width:79%;height:130rpx;justify-content: space-around;" class="direction-start">
          <view class="title">{{item.name}}</view>
          <view class="space-between" style="width:100%;">
            <view class="center">
              <text style="font-size: 34rpx;color:#FE0000;">{{item.score}}</text>
              <text style="font-size: 26rpx;margin-left:5rpx">蓝宝石</text>
            </view>
            <view class="center num">
              <text @click.stop="carDeatil(item.id,1,item.score)" v-if="item.cart_nums!=0">-</text>
              <text v-if="item.cart_nums!=0">{{item.cart_nums}}</text>
              <text @click.stop="carDeatil(item.id,2,item.score)">+</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view style="width:100%;height:1px"></view>
</template>

<script setup lang="ts">
  import { navTo, redirectTo } from '@/utils/navigator';
  import { telCall } from '@/utils/copyText';
  import swiperList from '@c/reservation/swiper.vue';
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast } from '@/utils/prompt';
  import { getSubscribeGoodsList, getSubscribeCart } from '@/gql/gemstone';
  import { getSubscribeInfo } from '@/gql/reservation';
  import { getDriverID } from '@/stores/driverID';
  import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  userInfo.gemstone()
  const driver_id = getDriverID();
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref('');
  const getInfo = ref()
  const orderID = ref()
  const money = ref()
  const count_nums = ref(0)
  const count_score = ref(0)
  onLoad((pearm) => {
    orderID.value = pearm.id
    init()
  })
  onShow(() => {
    const lost = uni.getStorageSync('Appointment')
    if (lost) {
      showLoading()
      const payload = {
        id: Number(orderID.value),
        address: lost.locName,
        longitude: lost.longitude,
        latitude: lost.latitude
      };
      toPublish(
        'plug/editSubscribeAddress',
        payload,
        (obj : any) => {
          const { code } = obj;
          if (code === 1) {
            init()
          }
        }
      );
    }
  })
  function init() {
    showLoading()
    const payload = {
      query: getSubscribeInfo,
      variables: {
        driver_id,
        subscribe_id: Number(orderID.value)
      },
    };
    toPublish(
      'ql/plug/getSubscribeInfo',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getSubscribeInfo } = obj.data;
        getInfo.value = getSubscribeInfo
        currentPage.value = 1
        orderLists.value = []
        shopList()
      }
    );
  }
  function shopList() {
    isLoading.value = true;
    money.value = userInfo.gem + getInfo.value.score
    const payload = {
      query: getSubscribeGoodsList,
      variables: {
        goods_type: 1,
        page: currentPage.value,
        driver_id,
        price: money.value,
        subscribe_id: Number(orderID.value)
      },
    };
    toPublish(
      'ql/score/getSubscribeGoodsList',
      payload,
      (obj : any) => {
        const { getSubscribeGoodsList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getSubscribeGoodsList.list];
        lastPage.value = getSubscribeGoodsList.lastpage;
        carSubscribe()
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      shopList();
    }
  }
  // 购物车调整
  function carDeatil(id : number, num : number, score : number) {
    showLoading()
    const payload = {
      driver_id,
      goods_id: id,
      subscribe_id: Number(orderID.value)
    };
    const topic = num === 1 ? 'score/jianSubscribeCart' : 'score/addSubscribeCart'
    toPublish(topic,
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          if (num == 1) {
            count_nums.value--
            count_score.value = count_score.value - score
            orderLists.value.filter((item) => item.id === id ? item.cart_nums-- : item)
          } else {
            orderLists.value.filter((item) => item.id === id ? item.cart_nums++ : item)
            count_nums.value++
            count_score.value = count_score.value + score
          }
        } else {
          errorToast(msg)
        }
      }
    );
  }
  //获取购物车数据
  function carSubscribe() {
    showLoading()
    const payload = {
      query: getSubscribeCart,
      variables: {
        subscribe_id: Number(orderID.value)
      },
    };
    toPublish(
      'ql/score/getSubscribeCart',
      payload,
      (obj : any) => {
        const { getSubscribeCart } = obj.data;
        count_nums.value = getSubscribeCart.nums
        count_score.value = getSubscribeCart.score
      }
    );
  }
  onUnload(() => {
    uni.removeStorageSync('Appointment');
  })
</script>

<style scoped lang="less">
  .ad-img-swiper {
    width: 100%;
    height: 327rpx;
  }

  .top {
    margin-top: 10rpx;
    align-items: flex-start
  }

  .right {
    font-size: 24rpx;
    color: #666;
    margin-top: 10rpx;
  }

  .title {
    max-width: 100%;
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .num {
    text:nth-child(odd) {
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 30rpx;
    }

    text:nth-last-child(3) {
      border: 1px solid #FF5700;
    }

    text:nth-of-type(2) {
      width: 50rpx;
      text-align: center;
    }

    text:nth-last-child(1) {
      background: linear-gradient(-66deg, #FF5700, #FE0000);
      color: #fff;
    }
  }
</style>